<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    var gwebsocket = null;
    var userName = "<%=session.getAttribute("username")%>";
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
      websocket = new WebSocket("ws://localhost:8080/websocket?username="+userName);
    } else {
      Show_Snackbar("当前浏览器不支持");
    }
    //连接发生错误的回调方法
    websocket.onerror = function() {
      Show_Snackbar("网络连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function() {
      Show_Snackbar("已上线");
      alert("<%=session.getId() %>");
    }
    //连接关闭的回调方法
    websocket.onclose = function() {
      Show_Snackbar("已下线");
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
      closeWebSocket();
    }
    //关闭WebSocket连接
    function closeWebSocket() {
      sessionStorage.clear();
      websocket.close();
    }
    //接收到消息的回调方法
    websocket.onmessage = function(event) {
      let text = event.data;
      if (!text) {
        text = " ";
      }
      let a="<div class=\"avatar\"><img src=\"http://q1.qlogo.cn/g?b=qq&nk=3278652852&s=140\"/></div><div class=\"bubble bubble-left\">";
      b="</div>";
      let str = a.concat(text);
      str=str.concat(b);
      let item = document.createElement('div');
      item.className = 'item item-left';
      item.innerHTML =str;
      document.querySelector('.content').appendChild(item);
      document.querySelector('#textarea').value = '';
      document.querySelector('#textarea').focus();
      //滚动条置底
      let height = document.querySelector('.content').scrollHeight;
      document.getElementById('WechatList').scrollTo({
        top: height,
        behavior: 'smooth'
      })
    }


    function send() {
      let text = document.querySelector('#textarea').value;

      let a="<div class=\"bubble bubble-left\">";
      let b=a.concat(text);
      let c=b.concat("</div><div class=\"avatar\"><img src=\"http://q1.qlogo.cn/g?b=qq&nk=3278652852&s=140\" /></div>");
      let item = document.createElement('div');
      item.className = 'item item-right';
      item.innerHTML =c;
      document.querySelector('.content').appendChild(item);
      document.querySelector('#textarea').value = '';
      document.querySelector('#textarea').focus();
      //滚动条置底
      let height = document.querySelector('.content').scrollHeight;
      document.getElementById('WechatList').scrollTo({
        top: height,
        behavior: 'smooth'
      })
      websocket.send(text);
    }

    function Show_Snackbar(Text_a) {
      var x = document.getElementById("snackbar")
      x.className = "show";
      x.innerText = Text_a;
      setTimeout(function() {
        x.className = x.className.replace("show", "");
      }, 3000);
    }
  </script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      height: 760px;
      width: 900px;
      border-radius: 4px;
      border: 0.5px solid #e0e0e0;
      background-color: #f5f5f5;
      display: flex;
      flex-flow: column;
      overflow: hidden;
    }

    .content {
      width: calc(100% - 40px);
      padding: 20px;
      overflow-y: scroll;
      flex: 1;
    }

    .content:hover::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1);
    }

    .bubble {
      max-width: 400px;
      padding: 10px;
      border-radius: 8px;
      position: relative;
      color: #000;
      word-wrap: break-word;
      word-break: normal;
    }

    .item-left .bubble {
      margin-left: 15px;
      background-color: #fff;
    }

    .item-left .bubble:hover:before {
      border-right: 10px solid #e8e8e8;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;

    }

    .item-left .bubble:hover {
      background-color: #e8e8e8;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;

    }

    .item-left .bubble:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-top: 10px solid transparent;
      border-right: 10px solid #fff;
      border-bottom: 10px solid transparent;
      left: -19px;
    }

    .item-right .bubble {
      margin-right: 15px;
      background-color: #95EC69;
    }

    .item-right .bubble:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-left: 10px solid #95EC69;
      border-top: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
      right: -19px;
    }

    .item-right .bubble:hover:before {
      border-left: 10px solid #89d65f;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;

    }

    .item-right .bubble:hover {
      background-color: #89d65f;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;
    }

    .item {
      margin-top: 15px;
      display: flex;
      width: 100%;
    }

    .item.item-right {
      justify-content: flex-end;
    }

    .item.item-center {
      justify-content: center;
    }

    .item.item-center span {
      font-size: 12px;
      padding: 2px 4px;
      color: #fff;
      background-color: #dadada;
      border-radius: 3px;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .avatar img {
      width: 42px;
      height: 42px;
      border-radius: 20%;
      /*box-shadow: 0px 0px 5px 5px #ebebeb;*/
    }

    .input-area {
      border-top: 0.5px solid #e0e0e0;
      height: 150px;
      display: flex;
      flex-flow: column;
      background-color: #fff;
    }

    textarea {
      flex: 1;
      padding: 10px;
      font-size: 20px;
      border: none;
      cursor: pointer;
      overflow-y: auto;
      overflow-x: hidden;
      outline: none;
      resize: none;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .button-area {
      display: flex;
      height: 40px;
      margin-right: 20px;
      line-height: 40px;
      padding: 5px;
      justify-content: flex-end;
    }

    .button-area button {
      width: 80px;
      border: none;
      outline: none;
      border-radius: 4px;
      float: right;
      cursor: pointer;
      font-size: 15px;
      color: #07C160;
    }

    .button-area button:hover {
      background-color: #e1e1e1;
      -webkit-transition-duration: 0.2s;
      transition-duration: 0.2s;
    }

    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
      width: 10px;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
      border-radius: 8px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0);
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    /* --------------------------------------------------------------------------------- */
    #snackbar {
      visibility: hidden;
      min-width: 250px;
      margin-left: -125px;
      background-color: #2aae67;
      color: #fff;
      text-align: center;
      border-radius: 10px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      left: 50%;
      bottom: 30px;
      font-size: 17px;
      font-size: 20px;
    }

    #snackbar.show {
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
      from {
        bottom: 0;
        opacity: 0;
      }

      to {
        bottom: 30px;
        opacity: 1;
      }
    }

    @keyframes fadein {
      from {
        bottom: 0;
        opacity: 0;
      }

      to {
        bottom: 30px;
        opacity: 1;
      }
    }

    @-webkit-keyframes fadeout {
      from {
        bottom: 30px;
        opacity: 1;
      }

      to {
        bottom: 0;
        opacity: 0;
      }
    }

    @keyframes fadeout {
      from {
        bottom: 30px;
        opacity: 1;
      }

      to {
        bottom: 0;
        opacity: 0;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div class="content" id="WechatList">
    <div class="item item-center">
            <span>你的用户名:
            <%
              HttpSession s= request.getSession();
              out.println(s.getId());
            %>
        </span>
    </div>
    <div class="item item-left">
      <div class="avatar">
        <!-- <img
    src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" />
-->
      </div>
      <div class="bubble bubble-left">您好123</div>
    </div>

    <div class="item item-right">
      <div class="bubble bubble-right">hello<br />你好呀</div>
      <div class="avatar">
        <!-- <img
    src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" />
-->
      </div>
    </div>
    <div class="item item-right">
      <div class="bubble bubble-right">可以<br />一会儿再发给你</div>
      <div class="avatar">
        <!-- <img
     src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" />
-->
      </div>
    </div>

  </div>
  <div class="input-area">
    <textarea name="text" id="textarea"></textarea>
    <div class="button-area">
      <button id="send-btn" onclick="send()">发 送(S)</button>
    </div>
  </div>
</div>
<a id="snackbar"></a>
</body>
</html>
